<template>
  <div id="home">
    <el-row>
      <el-col class="header-view"><header-view /></el-col>
      <el-container class="exhibit">
        <el-aside class="aside-view"><aside-view /></el-aside>
        <el-container>
          <el-main class="content-view">
            <el-container>
              <el-header><breadcrumb-view /></el-header>
                <!-- <content-view /> -->
                <router-view/>
            </el-container>
          </el-main>
          <!-- <el-footer class="footer-view"><footer-view /></el-footer> -->
        </el-container>
      </el-container>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import HeaderView from "./children/HeaderView.vue";
// import ContentView from "./children/ContentView.vue";
// import FooterView from "./children/FooterView.vue";
import AsideView from "./children/AsideView.vue";
import breadcrumbView from "@/views/children/BreadcrumbView.vue";

export default {
  name: "HomeView",
  components: {
    HeaderView,
    // ContentView,
    // FooterView,
    AsideView,
    breadcrumbView,
  },
};
</script>

<style lang="less" scoped>
#home,
.el-row {
  padding: 0;
  margin: 0;
  height: 100%;
  min-width: 1100px;
}
#home .header-view,
#home .footer-view {
  background-color: #b3c0d1;
  color: #333;
}

#home .exhibit {
  min-width: 1000px;
}

#home .header-view {
  background-color: #d3dce6;
  height: 90px;
}

#home .aside-view {
  background-color: #ffffff;
  height: 90vh;
  min-height: 600px;
  max-width: 260px;
  min-width: 260px;
}

#home .content-view {
  min-height: 500px;
  background-color: #e9eef3;
}
.footer-view {
  min-height: 130px;
}
</style>
